<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <template id="hello">
        <div>
            <h1 ref="title">{{msg}}</h1>

            <button @click="msg='欢迎'+Math.random()">更新数据</button>
            <button @click="destroy()">销毁组件</button>
        </div>
    </template>
</body>
<script>
    var vm=new Vue({
        // el:'#app',
        data:{
            msg:'welcome'
        },
        template:'#hello',
        methods: {
            destroy(){
                this.$destroy();
            }
        },
        beforeCreate(){
            console.log('beforeCreate-------实例刚刚创建，初始化Vue环境事件和生命周期钩子函数');
            console.log('$el:',this.$el);
            console.log('$data:',this.$data);
            console.log('msg:',this.msg);
        },
        created() {  // 常用！！
            console.log('created-------实例已经创建完成，已完成数据注入和监视');
            console.log('$el:',this.$el);
            console.log('$data:',this.$data); // 创建数据劫持对象$data
            console.log('msg:',this.msg); // 将变量定义到当前Vue实例的根属性上
        },
        beforeMount() {
            console.log('beforeMount-------挂载之前，对模板进行编译，创建虚拟DOM，此时还没有关联到页面上');
            console.log('$el:',this.$el);
        },
        mounted() { // 常用！！
            console.log('mounted------挂载完成，使用虚拟DOM替换页面中的el，此时虚拟DOM已关联到页面上');
            console.log('$el:',this.$el);
        },
        beforeUpdate() {
            console.log('beforeUpdate-------数据更新之前，内存数据已修改，但虚拟DOM尚未更新');
            // console.log(this.msg);
            console.log(this.$refs.title.textContent);
        },
        updated() { // 常用！！
            console.log('updated-------数据更新完成，此时已对虚拟DOM进行重新渲染并更新');
            console.log(this.$refs.title.textContent); // $nextTick的执行时机
        },
        beforeDestroy() {
            console.log('beforeDestroy-------实例销毁之前');  
        },
        destroyed() {
            console.log('destroyed-------实例销毁之后');  
        },
    });

    vm.$mount('#app');
</script>
</html>